<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    
    <svg t="1664160806140" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1023" width="128" height="128"><path d="M511.865135 250.851666c-143.795709 0-260.771435 116.98536-260.771435 260.771436 0 143.799321 116.975727 260.775048 260.771435 260.775048 143.790892 0 260.769027-116.976931 260.769028-260.775048 0-143.784871-116.978135-260.771435-260.769028-260.771436z m-71.236175 388.702498c-10.643462 5.5451-23.765059 1.411261-29.313772-9.230996l-49.113573-92.968634a21.734866 21.734866 0 0 1 0.942847-21.709579 21.734866 21.734866 0 0 1 19.278406-10.037775 21.708375 21.708375 0 0 1 18.333149 11.669395l49.111165 92.963817c5.543896 10.649482 1.406445 23.768672-9.238222 29.313772z m98.09469-193.117599c0 12.00174-9.727105 21.726437-21.731254 21.726437-12.002945 0-21.734866-9.724697-21.734866-21.726437V359.510345c0-11.996924 9.736739-21.731254 21.734866-21.731254 12.004149 0 21.731254 9.73433 21.731254 21.731254v86.92622z m128.447642 90.917969l-49.107552 92.968634a21.736071 21.736071 0 0 1-18.335558 11.669395 21.734866 21.734866 0 0 1-19.278405-10.035367 21.738479 21.738479 0 0 1-0.938031-21.716804l49.113574-92.963817a21.705967 21.705967 0 0 1 12.741087-10.686811 21.710783 21.710783 0 0 1 16.571481 1.453407 21.745704 21.745704 0 0 1 10.69524 12.739883 21.754133 21.754133 0 0 1-1.461836 16.57148z" fill="#1296db" p-id="1024"></path><path d="M511.998796-0.001204C229.22999-0.001204 0 229.228786 0 511.998796s229.22999 512 511.998796 512c282.77001 0 512-229.22999 512-512S794.768806-0.001204 511.998796-0.001204z m-0.133661 815.861862c-167.763065 0-304.230331-136.470878-304.23033-304.237556 0-167.754636 136.474491-304.225514 304.23033-304.225515 167.758249 0 304.229127 136.470878 304.233944 304.225515 0 167.766678-136.475695 304.237556-304.233944 304.237556z" fill="#1296db" p-id="1025"></path></svg>
    <script>
        const canvas=document.getElementById('canvas')
        const ctx=canvas.getContext('2d')

        ctx.beginPath()
        ctx.strokeStyle='green'
        ctx.moveTo(100,100)
        ctx.lineTo(300,300)
        ctx.lineTo(300,100)
        //闭合
        ctx.stroke()
        ctx.closePath()

        // ctx.strokeStyle='red'
        // ctx.strokeRect(400,50,50,50)
        ctx.fillStyle='red'
        ctx.fillRect(400,50,50,50)
    </script>
</body>
</html>